<body>
	<div style="margin-top: 10px; border: blue solid 2px; height: 100px;">
		<div style="margin-top: 20px; border: green solid 2px; height: 80px;">
			<div style="margin-top: 20px; margin-bottom: 20px; border: red solid 2px; height: 60px;">
			</div>	
			<div style="margin-top: 20px; margin-bottom: 20px; border: red solid 2px; height: 60px;">
			</div>	
			<div style="margin-top: 20px; margin-bottom: 20px; border: red solid 2px; height: 60px;">
			</div>	
		</div>	
	</div>

	<div style="margin-top: 20px; margin-bottom: 20px;">
		<div style="margin-top: 20px; margin-bottom: 20px;">
			<div style="margin-top: 20px; margin-bottom: 20px;">
			   <div style="border: blue solid 1px;">
			   Box nested in three DIVs with margin-top: 20px; but no border or padding.
			   </div>
			</div>	
		</div>	
	</div>
	
	<ul style="border: blue solid 2px;">
	    A normal list.
		<li style="border: red solid 2px;">listItem1</li>
		<li style="border: red solid 2px;">listItem1</li>
	</ul>
	
	<ul style="display: block; border: green solid 2px;">
		Not really a list.
	</ul>

	<ul style="border: blue solid 2px; font-size: 30pt;">
	    A normal list with bigger font
		<li style="border: red solid 2px;">listItem1</li>
		<li style="border: red solid 2px;">listItem1</li>
	</ul>
	
	<blockquote style="border: red solid 2px;">
		A blockquote.
	</blockquote>
	text before list
	<ul style="border: blue solid 2px;">
	<li>List item in list sorrounded by text
	</ul>
	text after list
</body>